// 地图样式功能函数,style参考：https://www.jianshu.com/p/68d62c57b4ab
import Icon from 'ol/style/Icon'
// import CircleStyle from 'ol/style/Circle'
// import { Fill, Stroke, Style, Text } from 'ol/style'
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style'

export default {
  data () {
    return {
      sIconType: 'standard' // 图标种类： 标准板standard，卡通版本，3D版本，矢量版本
    }
  },
  watch: {
    // watch
  },
  mounted () {
    // mounted
  },
  methods: {

    /**
     * @description 清空样式列表
     * @param aStyleList {Array} 样式列表数组
     * @return
     */
    clearStyleList (aStyleList) {
      const nLen = Object.keys(aStyleList).length
      aStyleList.splice(0, nLen)
    },

    /**
     * @description 返回样式列表数组元素个数
     * @param aStyleList {Array} 样式列表数组
     * @return {Number} 数组元素个数
     */
    getStyleNum (aStyleList) {
      return Object.keys(aStyleList).length
    },

    /**
     * @description 通过样式名称获取样式
     * @param sStyleName {String}样式名称； aStyleList {Array} 样式列表数组
     * @return oStyle {Object}返回获取到的样式或null（没有指定的样式）
     */
    getStyleByName (sStyleName, aStyleList) {
      if (aStyleList[sStyleName]) {
        return aStyleList[sStyleName]
      } else {
        return null
      }
    },

    /**
     * @description 从样式列表中删除指定的样式
     * @param sStyleName {String}样式名称； aStyleList {Array} 样式列表数组
     * @return ？返回删除的地图样式？
     */
    delStyleByName (sStyleName, aStyleList) {
      if (aStyleList[sStyleName]) {
        delete aStyleList[sStyleName]
      }
    },

    /**
     * @description 当IconType发生改变后，原icon类型不再适用，需要删除
     * @param aStyleList {Array} 样式列表数组
     * @return nDelNum {Number} 返回删除的地图样式数量
     */
    delStyleByImage (aStyleList) {
      let nDelNum = 0 // 删除数量统计
      for (const key in aStyleList) {
        if (aStyleList[key].getImage()) {
          console.log('delete this Style!')
          delete aStyleList[key]
          nDelNum++
        }
      }
      return nDelNum
    },

    /**
     * @description 根据给定的样式数据，创建样式
     * @param oStyleData {Object}样式数据
     * @return oStyle {Object} 新创建的样式文件
     */
    createStyle (oStyleData) {
      const oStyle = new Style()
      // oStyleData可以是获取数据中的properties
      if (oStyleData.fill) { // 填充色
        const iFill = new Fill({
          color: oStyleData.fill // 'rgba(255,255,255,0.4)'
        })
        oStyle.setFill(iFill)
      }
      // 边样式设置
      if (oStyleData.stroke) {
        // let iStroke // 描边对象
        const iColor = oStyleData.stroke.color
        const iWidth = oStyleData.stroke.width
        const iDash = oStyleData.stroke.lineDash ? oStyleData.stroke.lineDash : undefined // 可以后续修改
        // 创建边线数据
        const iStroke = new Stroke({
          color: iColor, // 可以是'rgba(255,255,255,0.4)' 或 '#ff0000'
          width: iWidth,
          lineCap: 'round', // butt, round, or square
          lineJoin: 'round', // bevel, round, or miter
          lineDash: iDash
        })
        // 设置到样式中
        oStyle.setStroke(iStroke)
      }
      // 图像Image设置icon
      if (oStyleData.icon) {
        const iSrc = '/mapres/images/icon/' + this.sIconType + '/' + oStyleData.icon.src + '.png'// 设置icon图像资源URI
        console.log(oStyleData.icon.src)
        const iAnchor = oStyleData.icon.anchor ? oStyleData.icon.anchor : [0.5, 0.5] // 设置icon的中心
        const iAnchorXUnits = oStyleData.icon.anchorXUnits ? oStyleData.icon.anchorXUnits : 'fraction'
        const iAnchorYUnits = oStyleData.icon.anchorYUnits ? oStyleData.icon.anchorYUnits : 'fraction'
        const iRotation = oStyleData.icon.rotation ? oStyleData.icon.rotation : 0 // 旋转
        const iScale = oStyleData.icon.scale ? oStyleData.icon.scale : 1 // 缩放
        const iOpacity = oStyleData.icon.opacity ? oStyleData.icon.opacity : 1 // 透明度
        const iColor = oStyleData.icon.color ? oStyleData.icon.color : undefined
        // 创建icon对象
        const oIcon = new Icon({ // ol.style.Icon static/img/point_32px.png
          crossOrigin: 'anonymous', // 文档中要求必须添加？待验证
          src: iSrc,
          anchor: iAnchor,
          anchorXUnits: iAnchorXUnits,
          anchorYUnits: iAnchorYUnits,
          rotation: iRotation,
          scale: iScale,
          color: iColor,
          opacity: iOpacity
        })
        //
        oStyle.setImage(oIcon)
      }
      // 图像Image设置circle
      if (oStyleData.circle) {
        const cFill = oStyleData.circle.fill
        const cRadius = oStyleData.circle.radius
        const cStrokeColor = oStyleData.circle.strokeColor || 'rgba(255,255,255,0)'
        const cStrokeWidth = oStyleData.circle.strokeWidth || 0
        const cDash = oStyleData.circle.Dash ? oStyleData.circle.Dash : undefined
        // 描边样式
        const cStroke = new Stroke({
          color: cStrokeColor,
          width: cStrokeWidth,
          lineDash: cDash
        })
        // Circle样式生成
        console.log(cFill, cRadius, cStrokeColor, cStrokeWidth, cStroke)
        const oCircleStyle = new CircleStyle({
          radius: cRadius,
          fill: new Fill({ // 文字填充色
            color: cFill
          }),
          stroke: cStroke
        })
        oStyle.setImage(oCircleStyle)
      }
      // RegularShape暂未提供

      // Text样式;使用时需要设置text
      if (oStyleData.text) {
        const iFont = oStyleData.text.font ? oStyleData.text.font : '10px sans-serif'
        const iFill = oStyleData.text.fill ? oStyleData.text.fill : '#333'
        const iStrokeColor = oStyleData.text.strokeColor ? oStyleData.text.strokeColor : '#333'
        const iStrokeWidth = oStyleData.text.strokeWidth ? oStyleData.text.strokeWidth : 0
        const oText = new Text({ // ol.style.Text
          font: iFont, // 字体与大小
          // text: '添加需要显示的内容'
          // scale: 1,
          // rotation: 0,
          fill: new Fill({ // 文字填充色
            color: iFill
          }),
          stroke: new Stroke({ // 文字边界宽度与颜色
            color: iStrokeColor,
            width: iStrokeWidth
          })
        })
        oStyle.setText(oText)
      }

      // 样式创建完成，返回新创建的样式
      return oStyle
    },

    /**
     * @description 复制现有样式
     * @param sStyleName {String}要复制的样式名称；
     * @return oStyle {Object}新创建的样式
     */
    cloneMapStyle (sStyleName) {
      console.log('暂不提供')
    },

    /**
     * @description 创建样式并添加样式列表（数组）
     * @param oStyleData {Object}样式数据；sStyleName {String}样式名称；aStyleList {Array} 样式列表数组
     * @return oNewStyle {Object} 新创建的样式
     */
    addStyle2StyleList (oStyleData, sStyleName, aStyleList) {
      const oNewStyle = this.createStyle(oStyleData)
      if (oNewStyle) {
        aStyleList[sStyleName] = oNewStyle
        return oNewStyle
      } else {
        return null
      }
    },

    /**
     * @description 插入样式--样式已生成，直接插入样式列表
     * @param oStyle {Object}样式；sStyleName {String}样式名称；aStyleList {Array} 样式列表数组
     * @return
     */
    instStyle2StyleList (oStyle, sStyleName, aStyleList) {
      if (oStyle) {
        aStyleList[sStyleName] = oStyle
      }
    },

    /**
     * @description 生成地图默认的边框颜色或选中后颜色
     * @param sDefStyleName 缺省样式名称（mapDefStyle|mapDefStyle）; aStyleList {Array} 样式列表数组
     * @return
     */
    createDefStyle (sDefStyleName, aStyleList) {
      let iStyle
      switch (sDefStyleName) {
        case 'mapDefStyle':
          iStyle = new Style({
            stroke: new Stroke({
              color: '#0E0EF0', // strokeColor,
              width: 2 // strokeWidth
            }),
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0)' // fillColor
            })
          })
          break
        case 'mapSelStyle':
          iStyle = new Style({
            stroke: new Stroke({
              color: '#FF0000', // strokeColor,
              width: 2 // strokeWidth
            }),
            fill: new Fill({
              color: 'rgba(255, 0, 0, 0)' // fillColor
            })
          })
          break
      }
      if (iStyle) {
        aStyleList[sDefStyleName] = iStyle
      }
    },

    /**
     * @description 继续
     * @param oStyle aStyleList {Array} 样式列表数组
     * @return
     */
    gono123 (aStyleList) {
      console.log('gono')
    }
    // 当前方法
  }
}
